<template>
  <div class="event-deal">
    <header-bar :title="'事件处理'">
      <template v-slot:backBtn>
        <i @click="handleCloseWebView" class="iconarrow_back"></i>
      </template>
    </header-bar>
    <select-tab :showLine="true" :tabArr="tabArr" @selectTab="selectTab"></select-tab>
    <div class="event-list">
      <transition :name="'fade-'+ slideType +'-slide'">
        <template v-for="(tab, index) in tabArr">
          <list-scroll
            v-if="tabArr[index].selected"
            :listData="listData"
            @handleToDetail="handleToDetail"
            @onPullingDown="onPullingDown"
            @onPullingUp="onPullingUp"
            :noMoreData="noMoreData"
            class="list"
            :key="index"
          ></list-scroll>
        </template>
      </transition>
      <div class="toMapEvent" v-if="seleIndex == 0" @click="clickToMapEvent">
        <i class="cubeic-navigation"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { closeWebView } from '@/common/js/android'
import { searchDictList } from '@/api/maintain.js';
import { getAllProcessList } from '@/api/eventAPI.js'
export default {
  data() {
    return {
      slideType: '',
      tabArr: [
        { label: '我的事件', selected: true },
        { label: '中队事件', selected: false }
      ],
      noMoreData: false,
      seleIndex: 0,
      searchVal: '',
      listData: [],
      total: 0,
      start: 1,
      eventSources: [],
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(window.localStorage.getItem('user'))
    }
  },
  beforeRouteEnter(to, from, next) {
    next(that => {
      that.getEventSource()
      that.handleSearch()
    });
  },
  created() {
    this.$watch('seleIndex',function(nV,oV){
      if(nV<oV){
        this.slideType = 'left'
      }else if(nV>oV){
        this.slideType = 'right'
      }
    })
  },
  methods: {/**
     * 获取事件来源
     */
    async getEventSource() {
      let res = await searchDictList("EVENT_SOURCE");
      this.eventSources = res.data;
    },
    handleCloseWebView() {
      this.$router.go(-1)
      closeWebView()
    },
    handleSearch(){
      this.start=1
      this.noMoreData = false
      if(this.seleIndex==0){
        this.getMyTaskData({
          start: this.start,
          eventNum: this.searchVal
        })
      }else if (this.seleIndex==1){
        this.getMyGroupData({
          start: this.start,
          eventNum: this.searchVal
        })
      }
    },
    onPullingDown(){
      this.start=1
      this.noMoreData = false
      if(this.seleIndex==0){
        this.getMyTaskData({
          start: this.start,
          eventNum: this.searchVal
        })
      }else if (this.seleIndex==1){
        this.getMyGroupData({
          start: this.start,
          eventNum: this.searchVal
        })
      }
    },
    onPullingUp(){
      if(this.total<this.start*4){
        this.noMoreData = true
        this.listData = this.listData.concat([])
        return false;
      }
      this.start++
      if(this.seleIndex==0){
        this.getMyTaskData({
          start: this.start,
          eventNum: this.searchVal
        })
      }else if (this.seleIndex==1){
        this.getMyGroupData({
          start: this.start,
          eventNum: this.searchVal
        })
      }
    },
    async getMyTaskData(param){
      let data = {
        eventDesc: "",
        eventNum: param.eventNum,
        userId: this.userInfo.userId,
        userLevel: 4,
        pageNum: param.start || 1,
        pageSize: 5
      }
      let res = await getAllProcessList(data)
      if(res.code == 0 && res.data){
        this.listData = this.start === 1 ? res.data.list : this.listData.concat(res.data.list)
        this.total = res.data.total
        for(let i of this.listData) {
          this.$set(i, 'eventSource', i.eventSourceName)
        }
      } else {
        const toast = this.$createToast({
          txt: '请求失败',
          type: 'error'
        })
        toast.show()
        this.listData = []
        this.total = 0
      }
    },
    async getMyGroupData(param){
      let data = {
        eventDesc: "",
        eventNum: param.eventNum,
        userId: this.userInfo.groupId,
        userLevel: 3,
        pageNum: param.start || 1,
        pageSize: 5
      }
      let res = await getAllProcessList(data)
      if(res.code == 0 && res.data){
        this.listData = this.start === 1 ? res.data.list : this.listData.concat(res.data.list)
        this.total = res.data.total
        for(let i of this.listData) {
          this.$set(i, 'eventSource', i.eventSourceName)
        }
      } else {
        const toast = this.$createToast({
          txt: '请求失败',
          type: 'error'
        })
        toast.show()
        this.listData = []
        this.total = 0
      }
    },
    selectTab(i){
      if(this.tabArr[i].selected)return;
      this.seleIndex = i
      for(let j = 0;j<this.tabArr.length;j++){
        if(i==j){
          this.tabArr[j].selected = true
        }else{
          this.tabArr[j].selected = false
        }
      }
      this.changeTabe(i)
    },
    async changeTabe(i){
      this.listData = []
      this.start = 1
      this.noMoreData = false
      if(i==0){
        this.getMyTaskData({
          start: this.start
        })
      }else{
        this.getMyGroupData({
          start: this.start
        })
      }
    },
    handleToDetail(data){
      let obj = {
        path: '/event-detail',
        query: {
          id: data.eventId,
          type: 'mytask',
          eventNode: 'dealCase',
          feedBackStatus: data.feedBackStatus,
          eventSource: data.eventSource,
          orgLevel: this.seleIndex==0?4:3
        }
      }
      this.$router.push(obj)
    },
    // 去地图查看事件
    clickToMapEvent() {
      window.WebViewJavascriptBridge.callHandler(
        'toNativeModule'
        ,{"name":"eventNav"}
        , function (responseData) {
        }
    );
    }
  },
  components: {
    'header-bar': () => import('@/components/header-bar/header-bar'),
    'list-scroll': () => import('@/components/list-scroll/list-scroll'),
    'select-tab': () => import('@/components/select-tab/select-tab'),
  },
}
</script>

<style lang="stylus" scoped>
.event-deal{
  width:100%;
  height: 100%;
  background:rgba(255,255,255,1);
  .event-list{
    height: 100%;
    position relative;
    .list{
      position absolute;    
      width: 100vw;
    }
    .toMapEvent {
      position absolute
      right 0
      top 24%
      z-index 99
      font-size 36px
      width 48px
      height 48px
      border-radius 50%
      background #4285f4
      text-align center
      line-height 52px
      color #fff
    }
  }
}
</style>
